<!--
 * @Author: yaojian66 1327629137@qq.com
 * @Date: 2022-06-29 19:46:21
 * @LastEditors: yaojian66 1327629137@qq.com
 * @LastEditTime: 2022-06-29 20:00:16
 * @FilePath: \geyao\第一百零三题 全选.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选</title>
</head>
<style>
  ul {
    list-style: none;
  }
</style>

<body>
  <!-- 请补全JavaScript代码，实现以下效果：
1. 选中"全选"框，以下所有选项全部勾选。
2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
3. 当其他复选框全部选中，"全选框"为选中状态。
4. 当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
1. 必须使用DOM0级标准事件（onchange） -->
  <ul>
    <li>全选<input type='checkbox' id='all'></li>
    <li>Java<input type='checkbox' class='item'></li>
    <li>javaScript<input type='checkbox' class='item'></li>
    <li>C++<input type='checkbox' class='item'></li>
    <li>python<input type='checkbox' class='item'></li>
    <li>.net<input type='checkbox' class='item'></li>
  </ul>

  <script>
    // 补全代码
    var all = document.querySelector('#all')
    var options = Array.from(document.querySelectorAll('.item'))
    all.onchange = () => {
      options.forEach(x => x.checked = all.checked)
    }
    options.forEach((item) => {
      item.onchange = function () {
        if (!this.checked) {
          all.checked = false
        } else {
          if (options.every(x => x.checked)) {
            all.checked = true
          } else {
            all.checked = false
          }
        }
      }
    })
  </script>
</body>

</html>